<template>
  <!-- 歌手子组件左边导航栏 -->
  <div class="left_nav">
    <div class="item" v-for="(item, index) in navs" :key="index">
      <div class="main">{{ item.key }}</div>
      <div
        class="secondary"
        v-for="sec in item.value"
        :class="currentNav == sec.key ? 'active' : ''"
        @click="singerCategoryClick(sec)"
      >
        {{ sec.key }}
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "LeftNav",
  setup(props, context) {
    let data = reactive({
      navs: [
        {
          key: "推荐",
          value: [
            {
              key: "推荐歌手",
              type: -1,
              area: -1,
            },
          ],
        },
        {
          key: "华语",
          value: [
            {
              key: "华语男歌手",
              type: 1,
              area: 7,
            },
            {
              key: "华语女歌手",
              type: 2,
              area: 7,
            },
            {
              key: "华语乐队",
              type: 3,
              area: 7,
            },
          ],
        },
        {
          key: "欧美",
          value: [
            {
              key: "欧美男歌手",
              type: 1,
              area: 96,
            },
            {
              key: "欧美女歌手",
              type: 2,
              area: 96,
            },
            {
              key: "欧美乐队",
              type: 3,
              area: 96,
            },
          ],
        },
        {
          key: "日本",
          value: [
            {
              key: "日本男歌手",
              type: 1,
              area: 8,
            },
            {
              key: "日本女歌手",
              type: 2,
              area: 8,
            },
            {
              key: "日本乐队",
              type: 3,
              area: 8,
            },
          ],
        },
        {
          key: "韩国",
          value: [
            {
              key: "韩国男歌手",
              type: 1,
              area: 16,
            },
            {
              key: "韩国女歌手",
              type: 2,
              area: 16,
            },
            {
              key: "韩国乐队",
              type: 3,
              area: 16,
            },
          ],
        },
        {
          key: "其他",
          value: [
            {
              key: "其他男歌手",
              type: 1,
              area: 0,
            },
            {
              key: "其他女歌手",
              type: 2,
              area: 0,
            },
            {
              key: "其他乐队",
              type: 3,
              area: 0,
            },
          ],
        },
      ],
      currentNav: "推荐歌手",
    });

    // 点击歌手分类的回调
    let singerCategoryClick = (category) => {
      // 防止重复点击
      if (data.currentNav == category.key) {
        return;
      }

      data.currentNav = category.key;
      context.emit("singerCategoryClick", category);
    };

    return {
      ...toRefs(data),
      singerCategoryClick,
    };
  },
});
</script>
<style scoped>
.left_nav {
  width: 20%;
  background-color: #fff;
  padding-top: 20px;
  padding-left: 40px;
  border-right: 1px solid #eee;
}
.item {
  margin: 15px 0;
}
.main {
  font-weight: 700;
  color: #222;
  font-size: 18px;
}
.secondary {
  font-size: 16px;
  color: #555;
  padding-left: 20px;
  margin-bottom: 10px;
  cursor: pointer;
}
.secondary:hover {
  text-decoration: underline;
}
.active {
  color: #c20c0c;
}
</style>
